<template>
  <div class="contents">
    <el-row :gutter="10" type="flex" align="middle">
      <el-col>
        <el-input v-model="user" placeholder="登录账号"></el-input>
      </el-col>
      <el-col>
        <el-button type="primary">查询</el-button>
        <el-checkbox v-model="forbid" style="margin-left: 15px;">
          不显示禁用账号
        </el-checkbox>
      </el-col>
      <el-col style="text-align: right;">
        <el-button type="primary" icon="el-icon-plus">新增</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="table1"
      @cell-mouse-enter="enter"
      @cell-mouse-leave="leave"
      style="width: 100%; margin-top: 10px;"
    >
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="usernum" label="登录账号"></el-table-column>
      <el-table-column prop="cangk" label="所属仓库"></el-table-column>
      <el-table-column prop="users" label="角色"></el-table-column>
      <el-table-column prop="status" label="禁用状态">
        <template slot-scope="scope">
          {{ scope.row.status }}
          <!-- v-show="tableData[scope.$index].id === isshow"  缩写:scope.row.id-->
          <div v-show="scope.row.id === isshow" class="el-butotn-div">
            <div class="div-layout">
              <span>编辑</span>
              <span>查看</span>
              <span>禁用</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes, jumper"
      :page-size="10"
      :page-sizes="[10, 20, 30, 40, 100]"
      style="text-align: right;"
      :total="0"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: '',
        forbid: true,
        table1: [
          {
            id: 1,
            name: '测试1',
            usernum: 'caigentuan1',
            cangk: '默认仓库',
            users: '分拣员',
            status: '正常',
          },
          {
            id: 2,
            name: '测试2',
            usernum: 'caigentuan2',
            cangk: '默认仓库',
            users: '分拣员',
            status: '正常',
          },
        ],
        isshow: -1,
      }
    },
    methods: {
      enter(row, column, cell) {
        this.isshow = row.id
      },
      leave(row, column, cell) {
        this.isshow = -1
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;

    .el-butotn-div {
      position: absolute;
      right: 0%;
      top: 0%;
      background: #1890ff;
      color: #fff;
      height: 100%;
      width: 150px;
      padding: 0 10px;

      .div-layout {
        display: flex;
        justify-content: space-between;
        align-items: center;
        vertical-align: middle;
        height: 100%;
        cursor: pointer;
      }
    }
  }
</style>
